Ideas - -Full Stack MERN Web Development
Responsive Web Design (RWD)
Media Queries Using Screen Orientation
- Apply styles based on screen orientation
- portrait
- landscape
- Proper Syntax
- @media (orientation: portrait) {}
- @media (orientation: landscape) {}
- @media: media query rule for styling
- (orientation: portrait): styling for portrait mode (height > width)
- (orientation: landscape): styling for landscape mode (width > height)
*NOTE: You can use the screen designation for specific targeting for the styling
eg. @media screen and (orientation: portrait) {}
Orientation Demo